<template>
	<div class="bg">
		<showtitle showtitle="消息中心"></showtitle>
		
		
		<div class="empty" v-if="this.$store.getters.getUser.name=='未登录'">
			<h1>您还没有登入~</h1>
			<h1>快去登录查看新世界</h1>
		</div>
		
		<div  v-else>
			
			
			
			<div class="card" @click="$router.push('/message?uid=1')" v-if="this.$store.getters.getUser.name !=null && this.$store.getters.getUser.name!='未登录' && this.$store.getters.getUser.name.trim() != ''">
				<div class="left_box">
					<img :src="require(`@/assets/icons/在线客服.png`)" />
				</div>
				<div class="middle_box">
					<div>在线客服（官方）</div>
					<div>有疑惑可以来咨询我哦~</div>
				</div>
				<div class="right_box">
					点击咨询
				</div>
			</div>
			
			
			<div class="empty" v-if="messages.length==0  && this.$store.getters.getUser.name!='未登录' ">
				<h1>您还没有会话...</h1>
				<h1>快去找人聊聊回收意向呗~</h1>
			</div>
			
			<div class="card" v-for="(item,index) in messages" v-if="item.uid.uid!=1" @click="goMessage(item.uid.uid)">
				<div class="left_box">
					<img :src="getImageUrl(item.uid.uid)" />
				</div>
				<div class="middle_box">
					<div class="box_title">{{item.uid.name}}</div>
					<div class="box_content" v-if="item.messages[item.messages.length-1].sender=='Me'">我: {{item.messages[item.messages.length-1].content}}</div>
					<div class="box_content" v-else>Ta说: {{item.messages[item.messages.length-1].content}}</div>
				</div>
				<div class="right_box">
					<div class="box_time">{{getTime(item.messages[item.messages.length-1].timestamp)}}</div>
					<div class="box_content_length" v-if="item.unreadCount != 0">{{item.unreadCount}}</div>
				</div>
			</div>
			
			
		</div>



		<div class="placeblock"></div>



	</div>
</template>

<script>
	export default {
		name: "messages",
		data() {
			return {
				messages: [],
			}
		},
		mounted() {
			if(this.getStorage('token')!=null){
				this.getData();
			}
			
		},
		computed: {
			
		},
		methods: {
			sortedMessagesComputed() {
			      // 在这里进行排序，并确保只在message_content.messages发生变化时重新排序  
			      this.messages.forEach((e)=>{
					  e.messages.sort((a, b) => a.timestamp - b.timestamp);
				  })
			},
			getTime(timestamp) {
				const date = new Date(timestamp);
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${hours}:${minutes}`;
			},
			getImageUrl(uid) {
				return `${this.IP}/img/${uid}.jpg`;
			},
			getData() {

				this.axios.get(`${this.IP}/get_relate_with_me`, {
					params: {
						token: this.getStorage("token"),
					}
				}).then(res => {
					this.messages = res.data;
					this.$store.commit('setMessages', this.messages);
					this.sortedMessagesComputed();
					
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			goMessage(uid){
				this.$router.push('/message?uid='+uid);
				
				
				this.axios.get(`${this.IP}/has_read_uid`, {
					params: {
						token: this.getStorage("token"),
						uid: uid
					}
				}).then(res => {
					this.messages = res.data;
					let old_messages = this.$store.getters.getMessages;
					old_messages.forEach((e)=>{
						if(e.uid.uid==uid){
							let e_messages = e.messages;
							e_messages.forEach((c)=>{
								c.isRead=true;
							})
							e.messages = e_messages;
							e.unreadCount=0;
						}
					})
					
					this.messages= old_messages;
					this.$forceUpdate();
					this.$store.commit('setMessages', this.messages);
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
				
				
				
			},
		}
	}
</script>

<style scoped>

	.empty{
		width: 50vw;
		text-align: center;
		margin: 0 auto;
		margin-top: 10vh;
		color: gray;
	}
	.card {
		width: 96vw;
		margin-bottom: 0px !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 1vw;
	}

	.left_box img {
		width: 64px;
		height: 64px;
		border-radius: 20px;
		padding: 2vw;
	}

	.middle_box {
		flex: 1;
		padding: 2vw;
	}

	.middle_box div:nth-child(1) {
		color: black;
		font-weight: bold;
		font-size: 28px;
		padding-bottom: 1vw;
	}

	.middle_box div:nth-child(2) {
		color: gray;
	}

	.right_box {
		max-width: 8vw;
		text-align: center;
		padding: 1vw;
	}

	.right_box div:nth-child(1) {
		margin-bottom: 1vw;
	}

	.right_box div:nth-child(2) {
		text-align: center;
		border-radius: 20px;
		padding: 2px;
		background-color: red;
		color: white;
	}
</style>